<template>
    <div class="houseList">
         
        <div class="tab"  v-for="(item,index) in tabList" :key="index">
         
            <div @click="toggleTab('houseListItem1')"   class="list">
                   {{ item[0] }}
                </div>
                <div @click="toggleTab('houseListItem2')"   class="list">
                 {{  item[1] }}
                </div>
        </div>
           <houseListItem1 :is="currentTab" keep-alive>
              </houseListItem1> 
    </div>

</template>
<script>
import houseListItem1 from "../houseList/houseListItem1";
import houseListItem2 from "../houseList/houseListItem2";
export default {
        components:{
          houseListItem1,
          houseListItem2
      },
  data() {
    return {
             currentTab: "houseListItem1",
      tabList: {
        text: ["大厅宴会", "婚宴酒店"]
      },
  
    };
  },
  methods:{
              toggleTab: function(tab) {
      this.currentTab = tab;
    }
  }
};
</script>
<style scoped>
.houseList {
  width: 100%;
  background-color: #121212;

}
.houseList .tab {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 70px;
  line-height: 70px;
}
.houseList .tab .list {
  color: #5c5c5c;
  font-size: 16px;
  margin-right: 20px;
  font-weight: 700;
}
.houseList .tab .list:hover {
  color: #fff;
  font-size: 16px;
  transform: scale(1.1);
  transition: all 0.3s;
  border-bottom: 2px solid #fe3b88;
}

</style>

